<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorator="layout_backend/base_layout">

<style layout:fragment="css">
</style>

<div layout:fragment="content">
	<div class="layuimini-container">
		<div class="layuimini-main">

			<fieldset class="layui-elem-field layuimini-search">
				<legend>搜索文章</legend>
				<div style="margin: 10px 10px 10px 10px">
					<form class="layui-form layui-form-pane" action="">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">文章标题</label>
								<div class="layui-input-inline">
									<input type="text" name="title" autocomplete="off"
										class="layui-input" value="">
								</div>
							</div>
							<div class="layui-inline">
								<a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
							</div>
						</div>
					</form>
				</div>
			</fieldset>

			<div class="layui-btn-group">
				<button class="layui-btn data-add-btn">添加</button>
				<button class="layui-btn layui-btn-danger data-delete-btn">删除</button>
			</div>
			<table class="layui-hide" id="currentTableId"
				lay-filter="currentTableFilter"></table>
			<script type="text/html" id="currentTableBar">
				<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail">查看</a>
	            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
	            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        	</script>

        	<script type="text/html" id="checkboxTpl">
			  <input type="checkbox" name="isShow" id="{{d.id}}" value="{{d.isShow}}" title="显示" lay-filter="show" {{ d.isShow== 'Y' ? 'checked' : '' }}>
			</script>
		</div>
	</div>
</div>

<script layout:fragment="script">
	layui.use(
		[ 'form', 'table' ],
		function() {
		var $ = layui.jquery, form = layui.form, table = layui.table;

		table.render({
			elem : '#currentTableId',
			url : 'list_json',
			cols : [ [ 
				{type : 'checkbox', width : 50, fixed : 'left'}, 
				{field: 'id', width: 80, title: 'id'},
				{field: 'title', width: 380, title: '标题'},
				{field:'lock', title:'是否显示', width:110, templet: '#checkboxTpl', unresize: true},
				{minWidth: 50, templet : '#currentTableBar', fixed : 'right', align : 'center', title: '操作'}
			 ] ],
			limit : 15,
			page : 1,
			page : true
		});

		// 监听搜索操作
		form.on('submit(data-search-btn)', function(data) {
			var result = JSON.stringify(data.field);
			var resultJson = JSON.parse(result);
			//执行搜索重载
			table.reload('currentTableId', {
				page : {
					curr : 1
				},
				where : resultJson
			}, 'data');
			return false;
		});

		// 监听添加操作
		$(".data-add-btn").on("click", function() {
			var index = layer.open({
                title: '添加文章',
                type: 2,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['100%', '100%'],
                content: 'add',
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
            return false;
		});

		// 监听删除操作
		$(".data-delete-btn").on("click",function() {
			var checkStatus = table.checkStatus('currentTableId'), data = checkStatus.data;
			layer.alert(JSON.stringify(data));
		});

		//监听表格复选框选择
		table.on('checkbox(currentTableFilter)', function(obj) {
			console.log(obj)
		});

		//监听显示操作
		form.on('checkbox(show)', function(obj){
	    	var isShow = obj.elem.checked?'Y':'N';
	    	var id = obj.elem.id;
	    	$.post("isShow", {id: id, isShow: isShow}, function(resp){
	        	layer.alert(resp.msg);
	        });
		});

		table.on('tool(currentTableFilter)', function(obj) {
			var data = obj.data;
			if (obj.event === 'edit') {
				var index = layer.open({
	                title: '添加文章',
	                type: 2,
	                shade: 0.2,
	                maxmin:true,
	                shadeClose: true,
	                area: ['80%', '80%'],
	                content: 'add?id='+data.id,
	            });
	            $(window).on("resize", function () {
	                layer.full(index);
	            });
			} else if (obj.event === 'delete') {
				layer.confirm('真的删除行么', function(index) {
					obj.del();
					layer.close(index);
				});
			} else if (obj.event === 'detail') {
				//layer.msg('ID：'+ data.id + ' 的查看操作');
				window.open('detail/'+data.id);
			}
		});

	});
</script>

</html>